<div ng-controller="DeviceCtrl">

  <div ng-if="!device.isConnected()" class="alert alert-warning" translate="device.recovery.connect-device-message">
    <strong>Please connect your device</strong> to access this section.
  </div>

  <div ng-controller="DeviceRecoveryCtrl"
       class="row">

    <fieldset class="col-md-12"
              ng-show="recovering"
              ng-disabled="!device.isConnected()">
      <h4 translate="device.recovery.seed-recovery">Seed recovery</h4>

      <div class="alert alert-info" translate="device.recovery.seed-recovery-message">
        Please follow the instructions on your device.
        Words are going to be entered in shuffled order.<br/>
        Also you'll be asked to retype some words that
        are not part of your recovery seed.
      </div>

      <form class="form-inline">
        <div class="form-group">

          <input type="text"
                 class="form-control input-lg"
                 ng-if="!wordCallback"
                 placeholder="{{ 'device.recovery.processing' | translate }}"
                 disabled>

          <input type="text"
                 class="input-seedword form-control input-lg"
                 placeholder="{{ 'device.recovery.enter-seed-word' | translate }}"
                 ng-model="$parent.seedWord"
                 ng-if="wordCallback"
                 focus
                 typeahead-editable="false"
                 typeahead-on-select="recoverWord()"
                 typeahead="word for word in seedWordlist | filter:$viewValue:startsWith | limitTo:10">

          <span ng-if="wordCallback"
                class="help-block" translate="device.recovery.confirm-choice">Confirm choice by pressing enter.</span>

        </div>
      </form>

      <h5 ng-show="seedWords.length" translate="device.recovery.recovered-seed-words">Recovered seed words:</h5>
      <ul class="list-group">
        <li class="list-group-item"
            ng-repeat="word in seedWords track by $index">{{word}}</li>
      </ul>
    </fieldset>

    <fieldset class="col-md-6"
              ng-show="!recovering"
              ng-disabled="!device.isConnected()">
      <form name="form" class="devrecover">

        <div class="form-group">
          <label for="label" class="control-label" translate="device.recovery.device-label">Device label</label>
          <input type="text" name="label" id="label" class="form-control"
                 placeholder="My BWallet"
                 ng-model="settings.label">
        </div>
        
        <div class="form-group">
          <label for="language" class="control-label" translate="device.recovery.device-language">Device language</label>
          <select name="language" id="language" class="form-control"
                 ng-model="settings.language"
                 ng-options="language.code as language.label for language in languages">
          </select>
        </div>

        <div class="form-group">
          <label for="word_count" class="control-label"
             translate="device.recovery.seed-length">Number of words in your recovery seed</label>
          <input type="text" name="word_count" id="word_count"
                 class="form-control"
                 slider
                 data-slider-value="24"
                 data-slider-min="12"
                 data-slider-max="24"
                 data-slider-step="6"
                 data-slider-tooltip="hide"
                 ng-model="settings.word_count">
          <div class="row devsetup-strength">
            <div class="col-sm-4 text-left" translate="device.recovery.seed-length-12">
              12 words
            </div>
            <div class="col-sm-4 text-center" translate="device.recovery.seed-length-18">
              18 words
            </div>
            <div class="col-sm-4 text-right" translate="device.recovery.seed-length-24">
              24 words
            </div>
          </div>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="pin-protection"
                   ng-model="settings.pin_protection"> {{ 'device.recovery.pin-protection' | translate }}
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="passphrase-protection"
                   ng-model="settings.passphrase_protection"> {{ 'device.recovery.passphrase' | translate }}
          </label>
        </div>

        <div class="form-group">
          <button class="btn btn-primary"
                  ng-disabled="!form.$valid"
                  ng-click="recoverDevice()" translate="device.recovery.continue">Continue</button>
          <a href="#/device/{{device.id}}"
             class="btn btn-link" translate="device.recovery.cancel">Cancel</a>
        </div>

      </form>
    </fieldset>

  </div>

</div>
